<template>
	<div id="agent">
		<header>
			<div class="header_1">
	  			<div class="header_1_l">
	  				<a href="tencent://message/?uin=800856669&Site=&Menu=yes" target="_self" class="qq">
	  					<img src="../../static/img/header-01.png"/>
	  					<p>在线客服</p>
	  				</a>
	  				<span></span>
	  				<div @click="collection('赶紧试','https://www.ganjinshi.com/#/home/index')" class="collection">
	  					<img src="../../static/img/header-02.png"/>
	  					<p>收藏</p>
	  				</div>
	  				<span></span>
	  				<router-link v-wechat-title='$route.meta.title' to="/home/index">赶紧试首页</router-link>
	  				<span></span>
	  				<router-link to="/share">邀请好友<p>奖励1000元</p></router-link>
	  			</div>
	  			<div class="header_1_r">
	  				<div class="user">
	  					<p>您好！</p>
	  					<router-link to="/agent">{{user}}</router-link>
	  				</div>
	  				<!--<div class="vip">
	  					<p v-if="vip == '0'">普通商家</p>
	  					<img v-else-if="vip == '1'" src="../../static/img/vip-01.png"/>
	  					<img v-else-if="vip == '2'" src="../../static/img/vip-02.png"/>
	  					<img v-else-if="vip == '3'" src="../../static/img/vip-03.png"/>
	  					<img v-else-if="vip == '4'" src="../../static/img/vip-04.png"/>
	  				</div>-->
	  				<router-link :to="{path:'/agent/news',query:{id:1}}" class="news">未读消息<span>{{news_num}}</span>条</router-link>
	  				<div @click="logout" class="logout">退出</div>
	  			</div>
	  		</div>
	  		<div class="header_2">
	  			<div>
	  				<div class="header_2_l">
		  				<img src="../../static/img/logo-02.png"/>
		  				<p>商家管理中心</p>
		  			</div>
		  			<div class="header_2_r">
		  				<router-link to="/agent/recharge">马上充值</router-link>
		  				<!--<router-link to="/a">升级会员</router-link>-->
		  				<router-link to="/agent/agentCenter">个人中心</router-link>
		  			</div>
	  			</div>
	  		</div>
		</header>
		<div id="content">
			<nav>
				<div class="toRelease">
					<router-link to="/agent/release">发布试用</router-link>
					<router-link to="/agent/releaseAuction"><img src="../../static/img/agent-08.png"/>赶紧拍</router-link>
				</div>
				<div class="nav_title">
					<img src="../../static/img/agent-01.png"/>
					<p>店铺管理</p>
				</div>
				<router-link to="/agent/store">绑定店铺</router-link>
				<div class="nav_title">
					<img src="../../static/img/agent-02.png"/>
					<p>试用管理</p>
				</div>
				<router-link :to="{path:'/agent/manage',query:{id:1}}" exact>淘宝试用</router-link>
				<router-link :to="{path:'/agent/manage',query:{id:2}}" exact>天猫试用</router-link>
				<router-link :to="{path:'/agent/manage',query:{id:3}}" exact>京东试用</router-link>
				<div class="nav_title">
					<img src="../../static/img/agent-07.png"/>
					<p>拍卖管理</p>
				</div>
				<router-link :to="{path:'/agent/manageAuction',query:{id:1}}" exact>淘宝拍卖</router-link>
				<router-link :to="{path:'/agent/manageAuction',query:{id:2}}" exact>天猫拍卖</router-link>
				<router-link :to="{path:'/agent/manageAuction',query:{id:3}}" exact>京东拍卖</router-link>
				<div class="nav_title">
					<img src="../../static/img/agent-03.png"/>
					<p>账号管理</p>
				</div>
				<router-link to="/agent/recharge">账号充值</router-link>
				<!--<router-link to="/agent/vip">升级VIP<img src="../../static/img/agemt-06.png" /></router-link>-->
				<router-link to="/agent/certification">安全认证</router-link>
				<router-link to="/agent/information">个人资料</router-link>
				<router-link to="/agent/withdrawal">账户明细</router-link>
				<!--<router-link to="/agent/bankCard">我的提现账户</router-link>-->
				<!--<div class="nav_title">
					<img src="../../static/img/agemt-04.png"/>
					<p>推广中心</p>
				</div>
				<router-link to="/agent/spread">邀请商家</router-link>
				<router-link to="/agent/spreadList">已邀请商家</router-link>-->
				<div class="nav_title">
					<img src="../../static/img/agent-05.png"/>
					<p>消息中心</p>
				</div>
				<router-link :to="{path:'/agent/news',query:{id:1}}" exact>系统消息</router-link>
				<!--<router-link :to="{path:'/agent/news',query:{id:2}}" exact>平台公告</router-link>-->
				<router-link to="/agent/feedback">意见反馈</router-link>
			</nav>
			<router-view/>
		</div> 
	</div>
</template>

<script>
export default{
	name:'agent',
	data:function(){
		return{
			user: '134*****237',//用户名
			vip: '0',//vip等级
			news_num: '0',//未读消息数量
			noticeTime2: ''
		}
	},
	methods:{
	  	collection: function(title,url){
	  		try{
			   window.external.addFavorite(url,title);
			}
			catch(e){
				try{
				    window.sidebar.addPanel(title,url,"");
				}
				catch(e){
					this.$alert("3","抱歉，您所使用的浏览器无法完成此操作。请使用快捷键Ctrl+D进行添加！");
				}
			}
	  	},
		info: function(){
			var _this = this;
			_this.$axios.post('/agent/info/show').then(function(res){
			    var data = res.data.result;
		    	_this.user = data.phone;
		    	_this.vip = data.memberStatus;
			}).catch(function (error) {
			    console.log(error);
			});
		},
		unRead:function(){
			var _this = this;
			var postData = _this.$qs.stringify({
	        	isRead:0
	        });
	    	_this.$axios.post('/agent/message/count',postData).then(function(res){
			    var data = res.data;
			    if(data.message=="succ"){
			    	_this.news_num = data.result;
			    }else{
			    	_this.$alert('2',data.result);
			    }
			}).catch(function (error) {
			    console.log(error);
			});
		},
		logout: function(){
			localStorage.removeItem('token');
			this.$router.push('/IDoperation/login');
		}
	},
	created:function(){
		window.clearInterval(this.noticeTime2);
		this.noticeTime2 = '';
		var _this = this;
		//----------请求商家信息------------
    	_this.info();
    	//------未读消息---------
    	_this.unRead();
	},
}
</script>

<style scoped>
/* ========== */
/* = Header = */
/* ========== */
header{
	
}
header .router-link-active{
	color: #ff464e;
}
.header_1{
	width: 1230px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #808080;
	font-size: 12px;
	padding: 8px 0;
}
.header_1_l{
	display: flex;
	align-items: center;
}
.header_1_l span{
	height: 10px;
	width: 1px;
	background-color: #9f9f9f;
	margin: 0 15px;
}
.header_1_l a p{
	display: inline;
	color: #FF464E;
}
.qq,.collection{
	display: flex;
	align-items: center;
}
.qq img,.collection img{
	height: 15px;
	display: block;
	margin-right: 3px;
}
.header_1_r{
	display: flex;
	align-items: center;
}
.user{
	display: flex;
	align-items: center;
}
.user a{
	color: #FF464E;
}
.vip{
	margin-left: 10px;
}
.vip p{
	height: 18px;
	line-height: 18px;
	padding: 0 5px;
	background-color: #FF464E;
	color: #FFFFFF;
	border-radius: 3px;
}
.vip img{
	height: 16px;
	display: block;
}
.news{
	margin-left: 10px;
}
.news span{
	color: #FF464E;
}
.logout{
	margin-left: 10px;
	cursor: pointer;
}
.header_2{
	background-color: #fff;
	padding: 20px 0;
	color: #4D4D4D;
	border-top: 1px solid #e2e2e2;
	border-bottom: 1px solid #e2e2e2;
}
.header_2>div{
	width: 1230px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header_2_l{
	display: flex;
	align-items: center;
}
.header_2_l img{
	height: 35px;
	display: block;
	margin-right: 15px;
}
.header_2_l p{
	padding-left: 15px;
	font-size: 20px;
	border-left: 1px solid #CCCCCC;
}
.header_2_r a{
	font-size: 14px;
	margin-left: 20px;
}
/* ========== */
/* = Nav = */
/* ========== */
#content{
	width: 1230px;
	display: flex;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
}
nav{
	width: 180px;
	margin-right: 20px;
}
.toRelease{
	padding: 20px 25px;
	box-sizing: border-box;
	background-color: #fff;
	border: 1px solid #E6E6E6;
	border-bottom: none;
	border-radius: 5px 5px 0 0;
}
.toRelease a:first-child{
	display: block;
	width: 100%;
	height: 30px;
	line-height: 30px;
	color: #FF464E;
	border: 1px solid #FF464E;
	background-color: #FFEEEE;
	border-radius: 3px;
	font-size: 16px;
	text-align: center;
	margin-bottom: 15px;
}
.toRelease a:last-child{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 30px;
	line-height: 30px;
	color: #FF8400;
	border: 1px solid #FF8400;
	border-radius: 3px;
	font-size: 16px;
}
.toRelease a:last-child img{
	height: 16px;
	display: block;
	margin-right: 5px;
}
.nav_title{
	display: flex;
	align-items: center;
	font-size: 16px;
	color: #4D4D4D;
	padding: 10px 0;
	background-color: #FAFAFC;
	border: 1px solid #E6E6E6;
}
.nav_title img{
	height: 18px;
	display: block;
	margin-right: 5px;
	margin-left: 35px;
}
nav>a{
	height: 40px;
	line-height: 40px;
	background-color: #fff;
	display: flex;
	align-items: center;
	padding-left: 45px;
	color: #666666;
	border-left: 1px solid #E6E6E6;
	border-right: 1px solid #E6E6E6;
}
nav>a:last-child{
	border-bottom: 1px solid #E6E6E6;
}
nav>a img{
	height: 12px;
	display: block;
	margin-left: 5px;
}
nav .router-link-active{
	color: #FF464E;
}
</style>
